<template>
  <div class="">
    <table class="table table-dark">
      <thead>
        <tr>
          <th scope="col">序号</th>
          <th scope="col">考试科目</th>
          <th scope="col">考试年级</th>
          <th scope="col">考试时间</th>
          <th scope="col">考试状态</th>
        </tr>
      </thead>
      <tbody>
        <!-- {{examList.length}} -->
        <tr v-for="(item,index) in examList" v-if="examList.length>0">
          <th scope="row">{{index+1}}</th>
          <td>{{item.course}}</td>
          <td>{{item.grade}}</td>
          <td>{{item.test_time | datafmt("YYYY-MM-DD HH:mm:ss")}}</td>
          <td><button @click="startTest(item.test_address,item.id,item.course)">开始考试</button></td>
        </tr>
        <tr v-if="examList.length==0">
           <td>尚不存在考试信息</td>
        </tr>
      </tbody>
    </table>


    <div class="popBox" v-model="flag" v-if="flag">
      <div class="pop"></div>
      <div class="modal fade show" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
        style="display: block; padding-right: 17px;" aria-modal="true">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalCenterTitle">提示</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
            </div>
            <div class="modal-body">
              <p>{{text}}</p>
            </div>
            <div class="modal-footer">
              <!-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> -->
              <button type="button" class="btn btn-primary" @click="flag=!flag">确定</button>
            </div>
          </div>
        </div>
      </div>
    </div>



    <router-view></router-view>
  </div>
</template>

<script>
  import Vue from 'vue';

  export default {
    name: "examList",
    data: () => {
      return {
        examList: [],
        flag: false,
        startime:"",
        intime:"",
        text:"",
        isTest:true
      }
    },
    created: function() {
      this.queryExamList();
    },
    methods: {
      /* 查询考试列表*/
      queryExamList: function() {
        Vue.axios.get(this.$store.state.localhost + "examLists")
          .then(res => {
            this.examList = res.data.data;
            console.log(res);
          })
          .catch(err => {
            console.log(err);
          })
      },
      // 是否允许考试
      isAllowTest:function(url, id, course){
        let that = this;
        this.axios.get(this.$store.state.localhost + "getScore?id=" + id)
        .then(res=>{
          console.log(res);
          if(!res.data.isTest){
            that.isTest = false;
            // if(that.isTest){
              that.text = "您已参加过该考试！";
              console.log("不允许考试");
              that.flag = !that.flag;
              return;
            // }
          }else{
            that.$router.push({name:"startExam",query:{"url":url,"id":id,"course":course,"time":that.startime,"intime":that.intime}});
          }
        })
        .catch(err=>{
          console.log(err);
        })
      },

      // testStatus:function(){
      //   for(let i=0;i<this.examList.length;i++){
      //     var endtime = new Date(this.examList[i].test_time);
      //     endtime.setHours(endtime.getHours() + parseFloat(this.examList[i].twice_time)); //考试结束时间
      //     if(new Date().getTime() - endtime.getTime() > 0){
      //         this.text = "考试结束";
      //     }else if(new Date().getTime() - new Date(this.examList[i].test_time).getTime() > 0 && new Date().getTime() - endtime.getTime() < 0){
      //       this.text = "正在考试";
      //     }
      //   }
      // },
      // 点击开始考试
      startTest: function(url, id, course) {
        console.log(this.isTest);
        for(let i=0;i<this.examList.length;i++){
          if(this.examList[i].id == id){
            if(new Date(this.examList[i].test_time).getTime()-new Date().getTime() > 0){
              console.log("不能考试");
              this.text = "现在还没到考试时间，请耐心等待考试开始！";
              this.flag = !this.flag;
              return;
            }else{
              this.startime = this.examList[i].test_time;
              this.intime = this.examList[i].twice_time;
            }
          }
        }
        // 如果已经参加过考试了，，不允许再次考试
        this.isAllowTest(url, id, course);
      }
    }
  }
</script>

<style scoped="scoped">
  .pop {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
</style>
